<template>
  <div id="userRegisterView">
    <h2 style="margin-bottom: 16px">用户注册</h2>
    <a-form
      style="max-width: 480px; margin: 0 auto"
      label-align="left"
      auto-label-width
      :model="form"
      :rules="rules"
      @submit="handleSubmit"
    >
      <a-form-item field="userAccount" label="账号" validate-trigger="blur">
        <a-input v-model="form.userAccount" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item field="userName" label="用户名" validate-trigger="blur">
        <a-input v-model="form.userName" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item
        field="userPassword"
        tooltip="密码不少于 8 位"
        label="密码"
        validate-trigger="blur"
      >
        <a-input-password
          v-model="form.userPassword"
          placeholder="请输入密码"
        />
      </a-form-item>
      <a-form-item
        field="checkPassword"
        label="确认密码"
        validate-trigger="blur"
      >
        <a-input-password
          v-model="form.checkPassword"
          placeholder="请再次输入密码"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit" :loading="loading">
            注册
          </a-button>
          <a-button @click="toLogin">已有账号，去登录</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { UserControllerService } from "../../../generated";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";

const router = useRouter();
const loading = ref(false);

/**
 * 表单信息
 */
const form = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
  userName: "",
});

/**
 * 表单校验规则
 */
const rules = {
  userAccount: [
    { required: true, message: "请输入账号" },
    { minLength: 4, message: "账号长度不能小于 4 位" },
  ],
  userName: [{ required: false, message: "请输入用户名（可选）" }],
  userPassword: [
    { required: true, message: "请输入密码" },
    { minLength: 8, message: "密码长度不能小于 8 位" },
  ],
  checkPassword: [
    { required: true, message: "请再次输入密码" },
    {
      validator: (value: string, cb: any) => {
        if (value !== form.userPassword) {
          return cb("两次输入的密码不一致");
        }
        return cb();
      },
    },
  ],
};

/**
 * 跳转到登录页
 */
const toLogin = () => {
  router.push("/user/login");
};

/**
 * 提交表单
 */
const handleSubmit = async () => {
  loading.value = true;
  try {
    const res = await UserControllerService.userRegisterUsingPost({
      userAccount: form.userAccount,
      userPassword: form.userPassword,
      checkPassword: form.checkPassword,
      userName: form.userName,
    });

    if (res.code === 0) {
      Message.success("注册成功");
      // 注册成功后跳转到登录页
      router.push("/user/login");
    } else {
      Message.error("注册失败，" + (res.message || "请稍后重试"));
    }
  } catch (error) {
    Message.error("注册失败，" + error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
#userRegisterView {
  max-width: 520px;
  margin: 40px auto;
  padding: 20px;
}
</style>
